<template>
	<div class="ranking">
		<div class="ranking_wrap">
			<div class="ranking_item" v-for="(item,index) in rankingList" :key="index">
				<a class="ranking_item_wrap" :href="'https://m.bilibili.com/video/av'+item.aid+'.html'">
					<div class="ranking_item_img">
						<img src="../assets/tv.png" class="ranking_item_bgImg" />
						<img v-lazy="item.pic" class="ranking_item_indexImg"/>
					</div>
					<div class="ranking_play_wrap">
						<div class="ranking_play_icon">
							<svg class="index__icon__src-commonComponent-Item-" aria-hidden="true"><use xlink:href="#icon-bofangshu"></use></svg>
						</div>
						<div class="ranking_play_total">
							<p>{{item.video_review}}</p>
						</div>
						<div class="ranking_play_danmu">
							<svg class="index__icon__src-commonComponent-Item-" aria-hidden="true"><use xlink:href="#icon-danmushu"></use></svg>
						</div>
						<div class="ranking_danmu_total">
							<p>{{item.video_review}}</p>
						</div>
					</div>
				</a>
				<a :href="'https://m.bilibili.com/video/av'+item.aid+'.html'" class="ranking_title">
					<p>{{item.title}}</p>
				</a>
			</div>
		</div>
	</div>
</template>

<script>
	import axios from 'axios';
	let listLength = 20;
	export default{
		data(){
			return {
				data:[],
				rankingList:[]
			}
		},
		created(){
			let self = this;
			$(window).scroll(function(){
				let scrollTop = $(this).scrollTop()
    			let scrollHeight = $(document).height()
    			let windowHeight = $(this).height()
    			if(scrollTop + windowHeight === scrollHeight) {
    				self.showLength()
    			}
			})
		},
		mounted(){
			axios({
				methods:'get',
				url:'/ranking',
			}).then((res) =>{
				this.data = res.data.data.list
				console.log(this.data)
			}).then(()=>{
				this.showLength()
			})
			
		},
		methods:{
			showLength(){
				let con = this.data.splice(0,listLength)
				this.rankingList = this.rankingList.concat(con)
			},
			numChange(list){
				return list>10000?(list/10000).toFixed(1)+'万':list
			}
		},
	}
</script>

<style lang="scss" scoped>
	.ranking{
		position: relative;
	    width: 100%;
	    padding-top: 12px;
	    .ranking_wrap{
	    	position: relative;
		    padding-left: 6px;
		    padding-right: 6px;
		    display: flex;
		    flex-wrap:wrap;
		    .ranking_item{
		    	width: 50%;
		    	margin-bottom: 16px;
		    	padding: 0 6px;
		    	.ranking_item_wrap{
		    		display: block;
		    		text-decoration: none;
	    		    position: relative;
				    width: 100%;
				    overflow: hidden;
				    margin: auto;
				    border-radius: 5px;
				    background-color: #e7e7e7;
				    background-image: linear-gradient(transparent 50%,rgba(0,0,0,.5));
				    .ranking_item_img{
				    	width: 100%;
						height: 106px;
						.ranking_item_bgImg{
							position: relative;
							display: block;
							width: 60%;
							height: 106px;
							margin: auto;
						}
						.ranking_item_indexImg{
							position: absolute;
							top: 0;
							left: 0;
							width: 100%;
						}
				    }
				    .ranking_play_wrap{
				    	display: flex;
						position: absolute;
						left: 0;
						bottom: 0;
						height: 16px;
						width: 100%;
						padding-left: 8px;
					    background: linear-gradient(180deg,rgba(33,33,33,0),rgba(33,33,33,.5));
					    .ranking_play_icon{
					    	width: 16px;
					    	margin-top: -1.5px;
					    	svg{
					    		display: block;
							    width: 100%;
					    		height: 16px;
							    fill: #fff;
					    	}
					    }
					    .ranking_play_total{
					    	margin-left: 6px;
					    	width: 48px;
					    	p{
					    		text-align: left;
							    font-size: 12px;
							    color: #fff;
							    line-height: 14px;
							    transform: scale(0.8);
					    		transform-origin: left;
					    	}
					    }
					    .ranking_play_danmu{
					    	width: 16px;
					    	margin-top: -1.5px;
					    	svg{
				    		    display: block;
							    width: 100%;
					    		height: 16px;
							    fill: #fff;
					    	}
					    }
					    .ranking_danmu_total{
					    	margin-left: 6px;
					    	width: 48px;
					    	p{
					    		text-align: left;
							    font-size: 12px;
							    color: #fff;
							    line-height: 14px;
							    transform: scale(0.8);
					    		transform-origin: left;
					    	}
					    }
					    
				    }
		    	}
		    	.ranking_title{
		    		display: block;
		    		text-decoration: none;
		    		width: 100%;
				    position: relative;
				    margin: auto;
				    margin-top: 5px;
				    overflow: hidden;
				    height: 32px;
				    p{
			    	    font-size: 12px;
					    color: #212121;
					    letter-spacing: 0;
					    text-align: left;
					    line-height: 16px;
					    
				    }
		    	}
		    	
		    }
	    }
	}
</style>